import React from "react";

import { Menu, Layout } from "antd";
import { HomeOutlined } from "@ant-design/icons";
import { Link, Outlet } from "react-router-dom";
// 定义布局
const { Sider, Content } = Layout;
// cebianlan
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}
const items = [
  getItem(
    <Link to="/home/Visual/ParkCockpit">园区驾驶舱</Link>,
    "1",
    <HomeOutlined />
  ),
  getItem(
    <Link to="/home/Visual/ParkInvestmentAnalysis">园区招商分析</Link>,
    "2",
    <HomeOutlined />
  ),
  getItem(
    <Link to="/home/Visual/ParkEquipment">园区设备管理</Link>,
    "3",
    <HomeOutlined />
  ),
  getItem(
    <Link to="/home/Visual/EnergyConsumptionAnalysis">能源消耗分析</Link>,
    "4",
    <HomeOutlined />
  ),
];
const Visual = () => {
  return (
    <Layout style={{ minHeight: (document.body.clientHeight - 64) + 'px' }}>
      <Sider width={256}>
        <div
          style={{
            width: 256,
          }}
        >
          <Menu
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            mode="inline"
            theme="dark"
            items={items}
          />
        </div>
      </Sider>
      <Layout>
        <Content>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};
export default Visual;
